<template>
  <view class="container" v-if="Object.values(userinfo).length != 0">
    <!-- 头部信息 -->
    <view class="header" @click="gouserinfo">
      <view style="display: flex; align-items: center">
        <image :src="userinfo.avatar ? imgurl + userinfo.avatar : '../../static/images/logo.png'" mode="" style="width: 120rpx; height: 120rpx; border-radius: 50%"></image>
        <view class="info">
          <view class="name">{{ userinfo.nickname }}</view>
          <view class="phone">{{ userinfo.mobile.substring(0, 3) + '****' + userinfo.mobile.substring(7, 12) }}</view>
        </view>
      </view>
      <uni-icons type="right" size="20" color="#fff"></uni-icons>
    </view>
    <!-- 选项 -->
    <view
      style="
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 702rpx;
        height: 102rpx;
        background: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 20rpx 24rpx;
        padding: 30rpx 24rpx;
      "
      v-for="(item, index) in list"
      :key="index"
      @click="gopage(item, index)"
    >
      <view style="display: flex; align-items: center">
        <image :src="item.img" mode="" style="width: 42rpx; height: 42rpx"></image>
        <text>{{ item.title }}</text>
      </view>
      <uni-icons type="right" size="20"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgurl: '',
      list: [
        {
          img: '../../static/mine/myorder.png',
          title: '我的订单',
          url: '/mine/myorder/myorder'
        },
        {
          img: '../../static/mine/mywallet.png',
          title: '我的钱包',
          url: '/mine/mywallet/mywallet'
        },
        {
          img: '../../static/mine/cupon.png',
          title: '代驾券',
          url: '/mine/valetticket/valetticket'
        },
        {
          img: '../../static/mine/costrules.png',
          title: '计费规则',
          url: '/pages/costrule/costrule'
        },
        {
          img: '../../static/mine/drivercollect.png',
          title: '司机招募',
          url: '/mine/requiredriver/requiredriver'
        },
        {
          img: '../../static/mine/invite.png',
          title: '邀请有礼',
          url: '/mine/invite/invite'
        },
        {
          img: '../../static/mine/applcation.png',
          title: '发票申请',
          url: '/mine/applybill/applybill'
        },
        {
          img: '../../static/mine/setting.png',
          title: '设置',
          url: '/mine/setting/setting'
        }
      ],
      userinfo: {}
    };
  },
  onLoad() {
    // this.getuserinfo();
    this.imgurl = this.img;
  },
  onShow() {
    //获取个人信息
    this.getuserinfo();
  },
  methods: {
    // 获取个人资料
    async getuserinfo() {
      const res = await this.http('/user/myuser', 'POST');
      console.log('个人信息', res);
      this.userinfo = res.data;
    },
    // 跳转到我的信息
    gouserinfo() {
      uni.navigateTo({
        url: '/mine/userinfo/userinfo'
      });
    },
    // 功能页跳转
    gopage(item, index) {
      uni.navigateTo({
        url: item.url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 200rpx;
    background-color: #327df6;
    padding: 0 24rpx 0 34rpx;
    .info {
      margin-left: 20rpx;
      color: #fff;
      .name {
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;
      }
      .phone {
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        margin-top: 4rpx;
      }
    }
  }
}
</style>
<style>
page {
  background-color: #f4f5f9;
}
</style>
